<template>
  <div class='container'>
    <el-dialog
      title="提示"
      :visible="previewDialogVisible"
      width="50%"
      :before-close="closeDia"
      @open='openDia'>
      <span>
          <!-- 第一行 -->
        <el-row :gutter="20" style="margin-bottom:10px">
          <el-col :span="6">[题型]：单选题</el-col>
          <el-col :span="6">[编号]：{{questionDetail.id}}</el-col>
          <el-col :span="6">[难度]：{{questionDetail.difficulty}}</el-col>
          <el-col :span="6">[标签]：{{questionDetail.tags}}</el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="20" style="margin-bottom:10px">
          <el-col :span="6">[学科]：{{questionDetail.subjectName}}</el-col>
          <el-col :span="6">[目录]：{{questionDetail.directoryName}}</el-col>
          <el-col :span="6">[方向]：{{questionDetail.direction}}</el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="24">[题干]：<div v-html="questionDetail.question"></div></el-col>
          <el-col :span="24">
            <!-- 根据questionType是1还是2判断显示哪个部分，用v-if -->
            <span v-if="questionDetail.questionType === '1'">
            单选题选项：(以下选中的选项为正确答案)
              <div v-for="item in questionDetail.options" :key="item.id" style="margin-top:10px">
                <el-radio :value="item.isRight" :label="1">{{item.title}}</el-radio>
              </div>
            </span>
            <span v-if="questionDetail.questionType === '2'">
            多选题选项：(以下选中的选项为正确答案)
                <div v-for="item in questionDetail.options" :key="item.id" style="margin-top:10px" >
                  <el-checkbox  :value="item.isRight === 1" :label="1">{{item.title}}</el-checkbox >
                </div>
            </span>
          </el-col>
        </el-row>
        <el-divider></el-divider>
         <el-row>
          <el-col :span="24">
            [参考答案]：
            <el-button type="success" @click="showVdideo">视频答案预览</el-button>
             <div class='demo' v-show="playerOptions.sources[0].src">
                <video-player
                  class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions">
                </video-player>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
         <el-row>
          <el-col :span="24">[答案解析]： <span v-html="questionDetail.answer"></span></el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="24">[题目备注]：{{questionDetail.remarks}}</el-col>
        </el-row>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDia">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail as queDetail } from '@/api/hmmm/questions.js'
export default {
  props: {
    previewDialogVisible: {
      typeof: Boolean,
      default: false
    }
  },
  data () {
    return {
      questionObj: {}, // 父传子传递过来的数据
      questionDetail: {},
      playerOptions: {
        // 播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [{
          // 类型
          type: 'video/mp4',
          // url地址
          src: ''
        }],
        // 你的封面地址
        poster: '',
        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          // 全屏按钮
          fullscreenToggle: true
        }
      }
    }
  },
  methods: {
    // 关闭对话框
    closeDia () {
      this.$emit('update:previewDialogVisible', false)
      this.playerOptions.sources[0].src = ''
    },
    // 获取当前的题目的数据
    async getQueDetail () {
      const { data } = await queDetail({ id: this.questionObj.id })
      console.log(data)
      this.questionDetail = data
    },
    openDia () {
      this.getQueDetail()
    },
    // 展示视频
    showVdideo () {
      this.playerOptions.sources[0].src = this.questionDetail.videoURL
    }
  }
}
</script>

<style scoped>
 .demo{
    display: block;
    width: 600px;
    height: 338px;
    text-align: center;
    line-height: 100px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
  }

  .demo:hover{
    display: block;
  }</style>
